<template>
  <div class="doctor-comment-container">
    <van-nav-bar
      class="app-nav-bar"
      title="医生评价"
      left-arrow
      @click-left="$router.back()"
    />
    <van-cell-group class="doctor-info-wrapper">
      <van-row class="van-row-wrapper">
        <van-col class="left-col-wrapper" span="12">
          <div class="rate-wrapper"><span class="rate-number-span">{{integratedRate*2}}</span>分</div>
          <div class="star-wrapper">
            <van-rate readonly v-model="integratedRate" />
          </div>
        </van-col>
        <van-col class="right-col-wrapper" span="12">
          <div class="doctor-info-wrapper">
            <div class="doctor-name-wrapper">{{doctor.username}}</div>
            <div class="professionalTitle-wrapper">{{doctor.professionalTitle}}</div>
            <div class="hospital-wrapper">广东海洋大学医院</div>
          </div>

        </van-col>
      </van-row>
    </van-cell-group>

    <van-cell-group class="ven-cell-comment-wrapper">
      <div class="title">
        <span>患者评价（{{numberOfComment}}）</span>
      </div>
      <div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in commentList">
            <div>
              <span>用户{{item.id}}</span>
              <van-rate v-model="item.attitude" size="12px"/>
              <van-tag type="primary">预约挂号</van-tag>
            </div>
            <div>
              {{item.content}}
            </div>
          </van-cell>
        </van-list>

      </div>
    </van-cell-group>
  </div>
</template>

<script>
import doctorApi from '@/api/doctor'
import commentApi from '@/api/comment'
export default {
  name: "DoctorCommentIndex",
  data() {
    return {
      docId:null,
      page:1,
      limit:1,
      integratedRate:null,
      numberOfComment:null,
      doctor:{},
      val:3,
      loading: false,
      finished: false,
      commentList:[]
    }
  },
  computed: {},
  async created() {
    await this.init()
  },
  methods: {
    async init() {
      this.docId = this.$route.query.id
      //查询出医生信息
      await this.getDocInfo()
      //查询出综合信息
      await this.getIntegratedInformation()
    },
    async getIntegratedInformation(){
      const{data:res} = await commentApi.getIntegratedInformation(this.docId)
      this.numberOfComment = res.data.numberOfPositiveComment
      this.integratedRate = res.data.integratedRate
    },
    async getDocInfo(){
      const {data:res} = await doctorApi.findById(this.docId)
      this.doctor = res.data
    },
    async getComment(){
      const{data:res} = await commentApi.findPageByDocId(this.docId,this.page,this.limit)
      if (res.data.records.length==0){
       return  this.finished = true
      }
      const data = res.data.records
      data.forEach(item=>{
        this.commentList.push(item)
      })
    },
    async onLoad(){
      //查询出评论信息
      await this.getComment()

      this.page++

      // 加载状态结束
      this.loading = false;
    }
  }
}
</script>

<style lang="less" scoped>
.doctor-comment-container{
  .doctor-info-wrapper{
    .van-row-wrapper{
      .left-col-wrapper{
        border-right: 1px gray solid;
        .rate-wrapper{
          text-align: center;
          font-size: 12px;
          .rate-number-span{
            font-size: 25px;
          }
        }
        .star-wrapper{
          text-align: center;
        }
      }
      .right-col-wrapper{
        .doctor-info-wrapper{
          margin-left: 20px;
          .doctor-name-wrapper{
            font-size: 20px;
          }
          .professionalTitle-wrapper,.hospital-wrapper{
            font-size: 15px;
            color: #999999;
          }
        }
      }
    }
  }
  .ven-cell-comment-wrapper{
    margin-top: 10px;
    .title{
      font-size: 18px;
      line-height: 30px;
      font-weight: bold;
      text-align: center;
      color: #008CBA;
    }
    .patient-comment{
      border-bottom: 1px solid gainsboro;
    }
  }
}
</style>
